<template>
  <div>
    <el-card>
      <div class="header">
        <div style="display: inherit">
          <el-input
            auto-complete="on"
            size="mini"
            prefix-icon="el-icon-search"
            placeholder="搜索客户..."
            title="按下回车进行搜索"
            v-model.trim="searchKeyword"
            @keyup.native.enter="searchClient"
          ></el-input>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="searchClient"
          ></el-button>
        </div>
        <div>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-unlock"
            title="取消锁定"
            @click="changeAllStatus(1)"
          ></el-button>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-lock"
            title="锁定"
            @click="changeAllStatus(0)"
          ></el-button>
        </div>
      </div>
      <el-table
        border
        :data="showclientList"
        :height="tableHeigth || undefined"
        @selection-change="selectionChange"
      >
        <el-table-column label type="selection" align="center">
        </el-table-column>
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="80"
        ></el-table-column>
        <el-table-column label="用户名" prop="loginName">
          <template #default="{ row }">
            <div v-if="row.lkeyword">
              <span>{{ row.lfirst }}</span>
              <span style="background-color: gold">{{ row.lkeyword }}</span>

              <span>{{ row.llast }}</span>
            </div>
            <span v-else>{{ row.loginName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="昵称" prop="nickName">
          <template #default="{ row }">
            <div v-if="row.nkeyword">
              <span>{{ row.nfirst }}</span
              ><span style="background-color: gold">{{ row.nkeyword }}</span
              ><span>{{ row.nlast }}</span>
            </div>
            <span v-else>{{ row.nickName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号" prop="phoneNum">
          <template #default="{ row }">
            <div v-if="row.pkeyword">
              <span>{{ row.pfirst }}</span
              ><span style="background-color: gold">{{ row.pkeyword }}</span
              ><span>{{ row.plast }}</span>
            </div>
            <span v-else>{{ row.phoneNum }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="50" align="center">
          <template #default="{ row }">
            <div
              icon=""
              title="取消锁定"
              v-if="row.status == 0"
              @click="changeClientStatus(row, 1)"
            >
              <svg
                t="1668652904873"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5435"
                width="18"
                height="18"
              >
                <path
                  d="M512.213384 634.16242c-174.837819 0-317.027864-142.23577-317.027864-317.027864S337.375566 0 512.213384 0s317.027864 142.251012 317.027864 317.027864-142.190045 317.134556-317.027864 317.134556z m0-585.388902C364.277209 48.773518 243.867588 169.183139 243.867588 317.027864s120.409621 268.254346 268.254346 268.254346 268.254346-120.409621 268.254346-268.254346S660.164801 48.773518 512.213384 48.773518z"
                  fill="#333333"
                  p-id="5436"
                ></path>
                <path
                  d="M981.74994 317.652774H42.676828a18.290069 18.290069 0 0 0-18.290069 18.29007v419.80281c0 134.127173 109.740414 243.867588 243.867587 243.867587h487.918076c134.127173 0 243.867588-109.740414 243.867588-243.867587V335.942844a18.290069 18.290069 0 0 0-18.29007-18.29007zM512.213384 609.912836a97.547035 97.547035 0 1 1 97.547035-97.547035 97.547035 97.547035 0 0 1-97.547035 97.547035z"
                  fill="#FF505E"
                  p-id="5437"
                ></path>
                <path
                  d="M756.172422 1024H268.254346a268.985949 268.985949 0 0 1-268.254346-268.254346V335.942844a42.676828 42.676828 0 0 1 42.676828-42.676828h939.073112a42.676828 42.676828 0 0 1 42.676828 42.676828v419.80281a268.970707 268.970707 0 0 1-268.254346 268.254346zM48.773518 342.039533v413.706121c0 121.01929 98.461538 219.480829 219.480828 219.480828h487.918076c121.034532 0 219.480829-98.461538 219.480829-219.480828V342.039533z"
                  fill="#333333"
                  p-id="5438"
                ></path>
                <path
                  d="M512.213384 634.299595a121.933794 121.933794 0 1 1 121.933794-121.933794 122.086211 122.086211 0 0 1-121.933794 121.933794z m0-195.09407a73.160276 73.160276 0 1 0 73.160276 73.160276 73.251727 73.251727 0 0 0-73.160276-73.190759z"
                  fill="#333333"
                  p-id="5439"
                ></path>
                <path
                  d="M512.213384 829.149798a24.386759 24.386759 0 0 1-24.386759-24.386759V609.912836a24.386759 24.386759 0 0 1 48.773518 0V804.763039a24.386759 24.386759 0 0 1-24.386759 24.386759z"
                  fill="#333333"
                  p-id="5440"
                ></path>
              </svg>
            </div>
            <div
              icon=""
              title="锁定"
              v-else
              @click="changeClientStatus(row, 0)"
            >
              <svg
                t="1668652968631"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5943"
                width="18"
                height="18"
              >
                <path
                  d="M721.92 994.304H289.792l-32.768-15.36-91.136-103.424-8.192-25.6V384l40.96-40.96h626.688l40.96 40.96V849.92l-12.288 28.672L750.592 983.04l-28.672 11.264z m-412.672-81.92h395.264l79.872-79.872V424.96H239.616v411.648l69.632 75.776z"
                  fill="#437DFF"
                  p-id="5944"
                ></path>
                <path
                  d="M360.448 346.112h-81.92V70.656l40.96-40.96h385.024l40.96 40.96v168.96h-81.92V111.616H360.448z"
                  fill="#437DFF"
                  p-id="5945"
                ></path>
                <path
                  d="M443.392 560.128h143.36l10.24 65.536h-55.296v151.552h-53.248v-153.6h-61.44z"
                  fill="#63F7DE"
                  p-id="5946"
                ></path>
              </svg>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="50" align="center">
          <template #header>
            <FixedTableHead :fixedHeader.sync="fixedHeader"></FixedTableHead>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @current-change="pageChange($event)"
        @size-change="pageChange(undefined, $event)"
        style="text-align: center"
        layout="sizes, prev, pager, next, jumper, ->, total, slot"
        :current-page="curPage"
        :total="totalNum"
        :page-size="PageLimt"
        :page-sizes="PageLimts"
      ></el-pagination>
      <!-- 回到顶部 -->
      <el-backtop target=".app-main"></el-backtop>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      selectClients: [],
      fixedHeader: false,
      curPage: 1,
      PageLimt: 10,
      PageLimts: [10, 20, 30, 40, 50, 100],
      clientList: [],
      showclientList: [],
      totalNum: 0
    }
  },
  props: {
    // curPage:{
    //   default:1,
    // },
    // PageLimt:{
    //   default:10,
    // }
  },
  watch: {
    $route: {
      immediate: true,
      handler(val) {
        if (val.path.indexOf('client') != -1) {
          if (val.query.page && val.query.limit) {
            this.curPage = parseInt(val.query.page)
            this.PageLimt = parseInt(val.query.limit)
          }
          this.getClientList(this.curPage, this.PageLimt)
        }
      }
    }
  },
  computed: {
    tableHeigth() {
      return this.fixedHeader ? '75vh' : ''
    }
  },
  methods: {
    //搜索客户
    searchClient() {
      const { searchKeyword } = this
      if (searchKeyword.length) {
        this.showclientList = JSON.parse(
          JSON.stringify(this.clientList)
        ).filter((item) => {
          let find = false
          if (item.loginName.indexOf(searchKeyword) != -1) {
            item['lkeyword'] = searchKeyword
            let len = searchKeyword.length
            item['lfirst'] = item.loginName.slice(
              0,
              item.loginName.indexOf(searchKeyword)
            )
            item['llast'] = item.loginName.slice(
              item.loginName.indexOf(searchKeyword) + len
            )
            find = true
          }
          if (item.nickName.indexOf(searchKeyword) != -1) {
            item['nkeyword'] = searchKeyword
            let len = searchKeyword.length

            item['nfirst'] = item.nickName.slice(
              0,
              item.nickName.indexOf(searchKeyword)
            )

            item['nlast'] = item.nickName.slice(
              item.nickName.indexOf(searchKeyword) + len
            )

            find = true
          }
          if (item.phoneNum.indexOf(searchKeyword) != -1) {
            item['pkeyword'] = searchKeyword
            let len = searchKeyword.length

            item['pfirst'] = item.phoneNum.slice(
              0,
              item.phoneNum.indexOf(searchKeyword)
            )
            item['plast'] = item.phoneNum.slice(
              item.phoneNum.indexOf(searchKeyword) + len
            )
            find = true
          }
          if (find) {
            return true
          }
        })
      } else {
        // this.$message({ type: 'warning', message: '请输入关键词' })
        this.showclientList = this.clientList
      }
    },
    async changeAllStatus(status) {
      const { selectClients } = this
      if (selectClients.length) {
        let total = selectClients.length
        var success = 0
        for (let i in selectClients) {
          let item = selectClients[i]
          const res = await this.$API.client.changeClientStatus(item.id, status)
          if (res.ok) {
            success++
          }
        }
        if (success != 0) {
          await this.getClientList()
        }
        this.$message({
          type: 'success',
          message: `成功${success}个,失败${total - success}个`
        })
      } else {
        this.$message({ type: 'warning', message: '请先进行选择' })
      }
    },

    selectionChange(data) {
      this.selectClients = data
    },
    //用户状态
    async changeClientStatus(row, status) {
      const res = await this.$API.client.changeClientStatus(row.id, status)
      if (res.ok) {
        this.$message({
          type: 'success',
          message: status == 0 ? '锁定用户成功' : '已取消锁定该用户'
        })
        this.getClientList()
      } else {
        this.$message({
          type: 'error',
          message: res.message + ':' + (res.data || '')
        })
      }
    },
    pageChange(page = this.curPage, limit = this.PageLimt) {
      this.$router.push(
        { name: 'ClientList', query: { page, limit } },
        () => {},
        () => {}
      )
    },
    async getClientList(page = this.curPage, limit = this.PageLimt) {
      const res = await this.$API.client.getClientList(page, limit)
      if (res.ok) {
        this.clientList = res.data.records
        this.showclientList = this.clientList
        this.totalNum = res.data.total
      }
    }
  },
  created() {}
}
</script>

<style>
.header {
  display: flex;
  vertical-align: middle;
  justify-content: space-between;
  margin-bottom: 10px;
}
</style>
